<template>
    <div class="mouse-position">
        <input type="checkbox" @click.stop="handleClick">
        <span>鼠标坐标</span>
    </div>
</template>

<script setup>
import { onMounted,ref } from 'vue';
import PositionStatusBar from './PositionStatusBar.js';
import { useLineData } from '../store'
const store = useLineData()

const viewer = ref(null)
let positions

// 鼠标位置事件
const handleClick = (e)=>{
    const checked = e.target.checked
    if(checked){
        if(positions){
            positions.show()
        }else{
            positions = new PositionStatusBar(viewer.value)
        }
    }else{
        positions.hide()
    }
}

onMounted(()=>{
    viewer.value = store.Viewer  
})
</script>

<style scoped>
.mouse-position{
    background: rgba(111, 111, 111, 0.3);
    border: 1px solid #664a16;
    padding: 5px;
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
    color: white;
}

</style>